import { Colors, Typography, Spacings, ThemeManager } from 'react-native-ui-lib';
import { ViewStyle, StyleSheet, Dimensions } from 'react-native';
import * as Font from 'expo-font'; // 导入 expo-font

// 自定义间距类型
interface CustomSpacings {
  [key: string]: number; // 添加索引签名
  stackSpace: number; // 添加 stackSpace 属性
  page: number; // 页面间距
  gridGutter: number; // 网格间距
}

// 颜色配置
const colors = {
  primary: '#E83B2F',    // 主色调
  secondary: '#999999', // 次色调
  tertiary: '#222222', // 三级色调
  golden: '#D6AE64', // 金色
  blueplus: '#242A30', // 蓝色加号
  accent: '#FF2D55',     // 强调色
  white: '#ffffff', // 白色
  orange1: '#FF8600', // 橙色
  orange2: '#FFF8F2', // 橙色
  grey10: '#F4F6F7',  // 灰色
  grey11: '#e4e6e7',  // 灰色
  grey20: '#b1b1b1',  // 灰色
  speakingLight: '#62E8D0', // 更亮的马卡龙绿
  textPrimary: '#1D2D44', // 主要文本颜色
  textSecondary: '#748CAB', // 次要文本颜色
  background: '#F1EFE7',  // 背景色
  overlaybackground: '#ffffff', // 覆盖背景色
  historybackground: '#eeeeee', // 历史背景色
  headerBackground: '#1C2D44',  // 标题栏背景色
  error: '#FF4B4B', // 错误颜色
  success: '#2ECC71', // 成功颜色
  warning: '#FFA726', // 警告颜色
  avatarInactive: '#009990',  // 未激活状态
  avatarActive: '#7ABA78',    // 激活状态
  avatarActiveWave: '#748CAB', // 激活状态波纹
  avatarVoiceinput: '#074799', // 语音输入状态
  avatarSpeaking: '#0A6847',   // 说话状态核心
  avatarlistening: '#074799',   // 听取状态核心
  avatarSpeakingWave: '#62E8D0', // 说话状态波纹
  
  selected: '#009990', // 选中状态
};

// 加载颜色
Colors.loadColors(colors);

// 字体配置
const loadFonts = async () => {
  await Font.loadAsync({
    'BebasNeue': require('../../assets/fonts/BebasNeue.ttf'), // 加载自定义字体
  });
};

Typography.loadTypographies({
  h0: { fontSize: 32, color: colors.tertiary }, // 一级标题
  h1: { fontSize: 28, fontWeight: 'bold' }, // 一级标题
  h2: { fontSize: 24, fontWeight: 'bold' }, // 二级标题
  h3: { fontSize: 20, fontWeight: 'bold' }, // 三级标题
  primary: { fontSize: 18 }, // 正文文本
  primaryBold: { fontSize: 18, fontWeight: 'bold' }, // 正文文本加粗
  primaryBoldWhite: { fontSize: 18, fontWeight: 'bold', color: '#ffffff' }, // 正文文本加粗
  small: { fontSize: 16 }, // 小号文本
  smallBold: { fontSize: 16, fontWeight: 'bold' }, // 小号文本加粗
  smaller: { fontSize: 12 }, // 更小号文本
  smallwhitewithbackground: { fontSize: 16, color: '#fff', backgroundColor: 'rgba(0, 0, 0, 0.3)', borderRadius: 15, textAlign: 'center', lineHeight: 24, paddingHorizontal: 10   }, // 小号文本白色
  number: { fontSize: 24, fontFamily: 'BebasNeue' }, // 添加数字专用字体样式
});

// 导出 Typography 以供引用
export const TextStyles = Typography;

// 间距配置
const spacings: CustomSpacings = {
  page: 12, // 页面间距
  gridGutter: 16, // 网格间距
  stackSpace: 12, // 堆叠间距
};

Spacings.loadSpacings(spacings); // 使用 Spacings

// 导出颜色常量，以便在需要时直接使用
export const AppColors = colors;

// 定义 TextInput 样式
const textInputStyle = {
  height: 70, // 输入框高度
  backgroundColor: '#ffffff', // 背景颜色
  borderRadius: 32, // 圆角
  textAlign: 'center' as 'center', // 文字居中
  fontSize: 28, // 加文字大小

};

// 定义按钮样式
const buttonStyle: ViewStyle = {
  width: 90, // 按钮宽度
  height: 90, // 按钮高度
  justifyContent: 'center', // 垂直居中
  alignItems: 'center', // 水平居中
  backgroundColor: '#ffffff', // 背景颜色
  borderRadius: 30, // 圆角
  overflow: 'hidden',
};

// 定义样式
export const AppStyles = StyleSheet.create({
  accountContainer: {
    flexDirection: 'row', // 水平排列
    alignItems: 'center', // 垂直居中
    marginBottom: spacings.stackSpace, // 底部间距
  },
  cardStyle: {
    borderRadius: 8, // 卡片圆角
    elevation: 4, // 阴影效果
  },
  pagePadding: {
    padding: spacings.page, // 页面边距
  },
  textInputStyle, // 添加 TextInput 样式
  buttonStyle, // 添加按钮样式
  merchantItem: {
    width: '48%',
    height: Dimensions.get('window').width * 0.48 + 80,
    marginBottom: 20,
    alignItems: 'flex-start',
    backgroundColor: '#ffffff',
    borderRadius: 8,
  },
  merchantImage: {
    width: '100%',
    height: Dimensions.get('window').width * 0.48 - 12,
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },
  merchantName: {
    marginLeft: 12,
    marginTop: 10,
    textAlign: 'left' as 'left',
    color: Colors.tertiary,
  },
  merchantRatio: {
    marginTop: 4,
    marginLeft: 12,
    color: Colors.tertiary,
  },
  merchantLocation: {
    marginTop: 4,
    color: Colors.secondary,
  },
});

// 初始化函数
export const initializeUILib = async () => {
  await loadFonts(); // 加载字体
  Colors.loadColors(colors); // 加载颜色
}; 